import { memo, ReactElement } from "react";
import Image from "next/image";
import styles from "./index.module.scss";
import type { FC } from "react";
import type { IDigital } from "@/services/modules/home";

export interface IProps {
  children?: ReactElement;
  digitalData?: IDigital;
}

const Digital: FC<IProps> = memo(function (props) {
  const { children, digitalData } = props;
  return (
    <>
      <div className={styles.container}>
        <div className={styles["digital-left"]}>
          <div className={styles.name}>
            <Image
              src={digitalData?.digitalIcon!}
              width={40}
              height={40}
              alt="数字专辑"
              priority
            ></Image>
            <span className={styles.text}>{digitalData?.name}</span>
          </div>
          <div className={styles.content}>
            <span>{digitalData?.desc}</span>
          </div>
          <div className={styles.buy}>
            <span>{digitalData?.buyNow}</span>
          </div>
        </div>
        <div className={styles["digital-right"]}>
          <Image
            src={digitalData?.picStr1!}
            className={styles["pic-left"]}
            width={80}
            height={80}
            alt="picLeft"
          />
          <Image
            src={digitalData?.picStr2!}
            className={styles["pic-center"]}
            width={100}
            height={100}
            alt="picCenter"
          />
          {/* <Image
            src={digitalData?.picStr!}
            className={styles["pic-right"]}
            width={35}
            height={80}
            alt="picRight"
          /> */}
          <span
            className={styles["pic-right"]}
            style={{ backgroundImage: `url(${digitalData?.picStr})` }}
          ></span>
        </div>
      </div>
    </>
  );
});

export default Digital;
Digital.displayName = "Digital";
